<template>
  <div>
      <viewer :images="[QRImgUrl]">
        <img width="50px" height="50px" :src="QRImgUrl" alt="" />
      </viewer>
  </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  name: 'creatQrCode',
  props:['qrText','options'],
  data() {
      return {
          qrcode:null,
          visible:false,
          QRImgUrl: '',
          QRlink:'www.xxx.com'
      }
  },
  created(){
    setTimeout(()=>{
      this.getQRcode()
    })
  },
  methods: {  
      getQRcode(){
              let opts = {
                  errorCorrectionLevel: "L",//容错级别
                  type: "image/png",//生成的二维码类型
                  quality: 0.3,//二维码质量
                  margin: 1,//二维码留白边距
                  width: 200,//宽
                  height: 200,//高
                  text: this.qrText,//二维码内容
                  color: {
                    dark: "#666666",//前景色
                    light: "#fff"//背景色
                  }
              };
              //this.QRlink 生成的二维码地址url
              QRCode.toDataURL(this.qrText, opts , (err, url) => {
                  if (err) throw err
                  //将生成的二维码路径复制给data的QRImgUrl
                  this.QRImgUrl= url
              })
          }
  }

}
</script>

<style lang="less" scoped>
.modusl{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    transition:transform .3s cubic-bezier(.215,.61,.355,1) 0s;
    transform:scale(0);
    .divs{
      width: 500px;
      height: 500px;
      img,canvas{
          width: 500px;
          height: 500px;
      }
    }
}
.hoves{
    transform:scale(1);
}
</style>
